<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        var obj;
        //文件加载完毕后触发
        window.onload = function () {
            obj = document.getElementById("showBox");
            //设置头像点击事件
            var imgArr = obj.getElementsByTagName("img");
            for (var i = 0; i < imgArr.length; i++) {
                imgArr[i].onclick = function () {
                    changeImg(this)
                }
            }
        }

        function show() {
            if (obj.style.display == "block") {
                obj.style.display = "none";
            } else {
                obj.style.display = "block"
            }
        }

        function changeImg(showObj) {
            document.getElementById("show").src = showObj.src;
            show("showBox")
        }
    </script>
</head>
<style>
    .name {
        font-size: 20px;
    }

    .box {
        display: flex;
    }

    .box > div {
        width: 50px;
        height: 50px;
        border: 2px solid skyblue;

    }

    .box > div > img {
        width: 45px;
        height: 45px;
        padding-top: 2px;
    }

</style>
<body>
<div style="width: 400px;height: 600px;margin: auto">
    <div style="width: 40px;height: 40px;border: 1px solid blue;margin-top: 50px;margin: auto">
        <img id="show" src="photo/b1.jpg">
    </div>

    <input type="button" value="选择头像" style="margin-left: 165px;margin-top: 10px" onclick="show()">

    <div style="width: 200px;height: 400px;border: 3px solid skyblue;margin: auto;margin-top: 10px;display: none"
         id="showBox">
        <div class="name">
            男士头像
        </div>
        <div class="touXiang">
            <div class="box">
                <div><img src="photo/b1.jpg"></div>
                <div><img src="photo/b2.jpg"></div>
                <div><img src="photo/b3.jpg"></div>
                <div><img src="photo/b4.jpg"></div>
            </div>
            <div class="box">
                <div><img src="photo/b5.jpg"></div>
                <div><img src="photo/b6.jpg"></div>
                <div><img src="photo/b7.jpg"></div>
                <div><img src="photo/b8.jpg"></div>
            </div>
        </div>
        <div class="name">
            女士头像
        </div>
        <div class="touXiang">
            <div class="box">
                <div><img src="photo/g1.jpg"></div>
                <div><img src="photo/g2.jpg"></div>
                <div><img src="photo/g3.jpg"></div>
                <div><img src="photo/g4.jpg"></div>
            </div>
            <div class="box">
                <div><img src="photo/g5.jpg"></div>
                <div><img src="photo/g6.jpg"></div>
                <div><img src="photo/g7.jpg"></div>
                <div><img src="photo/g8.jpg"></div>
            </div>
        </div>
        <div class="name">
            动物头像
        </div>
        <div class="touXiang">
            <div class="box">
                <div><img src="photo/d1.jpg"></div>
                <div><img src="photo/d2.jpg"></div>
                <div><img src="photo/d3.jpg"></div>
                <div><img src="photo/d4.jpg"></div>
            </div>
            <div class="box">
                <div><img src="photo/d5.jpg"></div>
                <div><img src="photo/d6.jpg"></div>
                <div><img src="photo/d7.jpg"></div>
                <div><img src="photo/d8.jpg"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>